<template>
  <tmap-map
    :center="center"
    :zoom="15"
    :doubleClickZoom="false"
    :mapKey="mapKey"
  >
    <tmap-info-window
      :position="position"
      :content="content"
      :visible="visible"
      @close-click="onClose"
    />
    <tmap-multi-marker
      :styles="markerStyles"
      :geometries="markerGeometries"
      ref="markers"
      @click="print"
    />

  </tmap-map>
</template>
<script setup name="play-back" lang="ts">
const mapKey = "7LWBZ-HJE6J-U4LFQ-D2VF5-FZXI6-ET222F5I"
const center = reactive({ lat: 30.385705, lng: 104.079077 })
const markerStyles = reactive({
  start: {
    width: 25,
    height: 35,
    anchor: { x: 16, y: 32 },
    src: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png',
  }
})
const markerGeometries=reactive([
  {
    id: 'start',
    styleId:'start',
    position: { lat: 30.385705, lng: 104.079077 },
  },
  {
    id: 'start1',
    styleId:'start',
    position: { lat: 30.387705, lng: 104.079177 },
  }
]);
//初始化信息窗口隐藏
onMounted(() => {
  visible.value = false;
});
//信息窗口
const onClose = (e:any)=>{
  console.log('窗口关闭',e)
}
const position = ref({ lat: 30.385705, lng: 104.079177 });
const visible = ref(false)
const content = ref("<span style='color: #1c84c6;cursor: pointer'>点击</span>");
const print = (e:any)=>{
  console.log('e:',e)
  console.log('经纬度',e.latLng)
  console.log('clic2k');
  visible.value = true
}
</script>
<style lang="scss" scoped>
.ctrl {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}
</style>
